<template>
    <view :style="{ '--color': color }">
        <u-navbar :title="title" :autoBack="true" placeholder></u-navbar>

        <view class="Wrapper">
            <view class="row a-center">
                <text class="flex-1 black size30 bold500">设备号：{{ device.device_code }}</text>
                <text class="color_ff4 size28 m-left20">状态：{{ device.statusName }}</text>
            </view>
            <view class="color_33 size28 m-top12">放置位置：{{ device.address }}</view>
            <view class="row a-center m-top12">
                <text class="flex-1 color_33 size28">客服电话：{{ device.service_tel }}</text>
                <!-- <text class="color_33 size28 m-left20">运行记录</text> -->
            </view>
        </view>

        <u-sticky :customNavHeight="customNavHeight">
            <view class="Screening" @click="showDatetime = true">
                <text class="black size32 bold500">{{ dateTxt }}</text>
                <view class="iconfont icon-shaixuan black size36 p-left10"></view>
            </view>
        </u-sticky>

        <view class="list" v-for="(item, index) in pageData" :key="index">
            <view class="flex-1 d-flex f-column">
                <text class="black size32 bold500">{{ item.orderno }}</text>
                <text class="color_99 size28 m-top10">创建时间：{{ item.add_time }}</text>
                <text class="color_99 size28 m-top10">完成时间：{{ item.stop_time }}</text>
            </view>
            <view class="size36 bold500 black" v-if="item.payment">￥{{ item.payment }}</view>
        </view>

        <emptys v-if="!pageData.length"></emptys>

        <u-datetime-picker @cancel="showDatetime = false" @confirm="confirmDate" :show="showDatetime" v-model="value1" mode="date"></u-datetime-picker>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                title: '运行记录',
                showDatetime: false,
                dateTxt: '',
                value1: Number(new Date()),
                device_code: '01A250609W014',
                page: 1,
                limit: 10,
                getMore: true,
                pageData: [],
                device: ''
            };
        },
        onLoad(opt) {
            if (opt.device_code) this.device_code = opt.device_code;
            this.dateTxt = this.$pop.formatTimestamp(this.value1, 'YYYY-MM-DD');
            this.getShopDeviceOrder();
        },
        methods: {
            getShopDeviceOrder() {
                this.$http
                    .get({
                        url: '/singleSaleItoApi/getShopDeviceOrder',
                        data: {
                            device_code: this.device_code,
                            page: this.page,
                            limit: this.limit,
                            date: this.dateTxt
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data.list || [];
                        this.device = res.data.device;
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        if (result.length < this.limit) this.getMore = false;
                    });
            },
            confirmDate(e) {
                this.dateTxt = this.$pop.formatTimestamp(e.value, 'YYYY-MM-DD');
                this.value1 = e.value;
                this.showDatetime = false;
                this.init();
            },
            init() {
                this.page = 1;
                this.getMore = false;
                this.getShopDeviceOrder();
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.getShopDeviceOrder();
        },
        computed: {
            ...mapState(['color', 'System']),
            customNavHeight() {
                return 44 + this.System.statusBarHeight;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 710rpx;
        padding: 30rpx 24rpx;
        margin: 40rpx auto 0;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7rpx 29rpx 0px;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
    }
    .Screening {
        width: 100%;
        height: 100rpx;
        padding: 0 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f1f1f1;
        margin-top: 20rpx;
    }
    .list {
        width: 710rpx;
        padding: 24rpx 0;
        margin: 0 auto;
        border-bottom: 1px solid #f1f1f1;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
    }
</style>
